<template>
  <div style="min-width: 1920px; min-height: 1080px;">
    <div class="bgy-screen-top">
      <div class="top-left">
        <div class="top-logo"></div>
        <div class="bgy-line left"></div>
        <div class="top-logo-zhihui left" v-if="projectDetail.propertyStr === 1"></div>
        <div class="top-logo-shuz left" v-if="projectDetail.propertyStr === 2"></div>
      </div>
      <div class="top-center-panoramagram relative">
        <div class="top-title">{{projectDetail.projectShowName}}全景图</div>
        <div class="top-light"></div>
      </div>
      <div class="top-right">

         <div class="history-select" id="history-select" v-show="isShowHistory">
          <span>更新时间:</span>
          <zz-select
            :objectOPtionHeight="(Object.keys(this.timeList).length) > 6 ? '200px' : false"
            style="vertical-align: middle;"
            v-validation="{select: true, query: 'carouselTime'}"
            :border= false
            :options="{width: '145px'}"
            :option="timeList"
            background="none"
            optionBackground="rgba(10, 57, 79, 0.9)"
            selectOption="selectScreenOption"
            :name = "`${carouselTime}`"
            @optionClick="carouselTimeCallback">
          </zz-select>
        </div>

        <div class="right-line" v-show="isShowHistory"></div>

        <span class="t-left mr20">
          <i class="iconfont icon-zu4 handPoint" @click="autoPlay(false)" v-if="isAutoLoop" title="关闭自动显示楼栋信息"></i>
          <i class="iconfont icon-zu4 handPoint" @click="autoPlay(true)" v-else title="自动显示楼栋信息"></i>
        </span>

        <span class="t-left mr20">
            <i class="iconfont icon-zu6 handPoint" @click="autoHandle(false)" v-if="screenSetting.auto" title="手动播放"></i>
            <i class="iconfont icon-zu6 handPoint" @click="autoHandle(true)" v-else title="自动轮播"></i>
        </span>

        <zz-retrieve
          :left="-204"
          @show="showRetrieve"
          ref="retrieveIndex"
          fontSize="25px"
          style="margin-left: -5px; line-height: 20px; vertical-align: middle;"
          class="mr20"
          :height="372"
          :stage="true"
          :isVideoRouter="true"
          :isProject = true
        ></zz-retrieve>

        <!--<zz-history class="mr20"></zz-history>-->

        <span class="t-left mr20" @click="fullScreen" v-if="isFullScreen">
           <i class="iconfont icon-daquanping handPoint" style="font-size: 23px" title="全屏"></i>
        </span>

        <span class="t-left mr20" @click="exitScreen" v-else>
            <i class="iconfont icon-tuiquanping handPoint" style="font-size: 23px" title="退出全屏"></i>
          </span>

        <span class="t-left mr20" >
            <i class="iconfont icon-tuichu handPoint" @click="quit" title="退出"></i>
        </span>
        <!--<div class="right top-right-font" @click="leavePano">-->
          <!--<i class="iconfont icon-tuichu"></i>退出-->
        <!--</div>-->
        <!--<div class="right top-right-font" style="padding-right: 40px" @click="openLoop">-->
          <!--<i class="iconfont icon-lunbo" style="vertical-align: middle"></i>-->
          <!--<span v-if="!isLoop">自动轮播</span>-->
          <!--<span v-if="isLoop">关闭轮播</span>-->
        <!--</div>-->
      </div>
    </div>
    <div class="panoramagram-content" :style="{height:`985px`}">
        <div class="panoramagram-content-info relative" :style="{backgroundImage: `url(${imgUrl})`}">
          <div class="panoramagram-content-mask"></div>
          <div class="posi_pointer_list">
            <div class="position_pointer"
                 :style="{left:`${item.xcoord/bgSize.wide*innerWidth}px`,top:`${item.ycoord/bgSize.height*(contentHeight-40)}px`}"
                 :class="{highLight: highLightIndex === index && isBuildingInfoShow}"
                 @click="showBuildingInfo(item,index)"
                 v-for="(item, index) in pointerList"
                 v-if="item.isShow === 1"
            >
              <i class="iconfont icon-zu1"></i>
              <div>
                <div><span>{{item.buildingName}}，</span><span>{{item.sectionName}}</span></div>
                <div><span>{{item.buildingTier}}层，</span><span>{{item.households}}套</span></div>
              </div>
              <!-- <div class="icon-line" v-if="highLightIndex === index && isBuildingInfoShow"
                   :class="item.xcoord > bgSize.wide / 2 ? 'lineleft' : 'lineright'" >
                <div class="icon-circle"></div>
              </div> -->
            </div>
          </div>
          <transition name="show-hide">
            <div class="panoramagram-content-total" v-if="!isBuildingInfoShow">
              <div class="panoramagram-content-totalItem">
                <div class="panoramagram-totalItem-num">{{panoTotalDate.productionSafetyDay}}</div>
                <div class="panoramagram-totalItem-des">连续安全生产(天)</div>
              </div>
              <div class="panoramagram-content-totalItem">
                <div class="panoramagram-totalItem-num">{{panoTotalDate.remainingInFloorDay}}</div>
                <div class="panoramagram-totalItem-des">距整体交楼剩余(天)</div>
              </div>
              <div class="panoramagram-content-totalItem">
                <div class="panoramagram-totalItem-num">{{panoTotalDate.dustReachDay}}</div>
                <div class="panoramagram-totalItem-des">扬尘达标(天)</div>
              </div>
              <div class="panoramagram-content-totalItem">
                <div class="panoramagram-totalItem-num">{{panoTotalDate.noiseReachDay}}</div>
                <div class="panoramagram-totalItem-des">噪音达标(天)</div>
              </div>
              <div class="panoramagram-content-totalItem">
                <div class="panoramagram-totalItem-num red">{{panoTotalDate.abnormalWeatherDay}}</div>
                <div class="panoramagram-totalItem-des">异常天气(天)</div>
                <div class="panoramagram-totalItem-subDes">(高温、暴雨/雪、大风)</div>
              </div>
            </div>
          </transition >
          <loop></loop>
        </div>
    </div>
    <transition name="show-hide">
      <building_info v-if="isBuildingInfoShow" @close="close" :pointerInfo="pointerInfo" :bgSize="bgSize" :BuildingDetailInfoArray="BuildingDetailInfoArray" :highLightIndex="highLightIndex" :panoramaId="panoramaId"></building_info>
    </transition>

  </div>
</template>

<script>
  import mixin from './mixin'
  import { mapGetters } from 'vuex'
  export default {
    name: 'index',
    data () {
      return {
        isBuildingInfoShow: false,
        isTrue: true,
        panoTotalDate: {
          abnormalWeatherDay: 0,
          dustReachDay: 0,
          noiseReachDay: 0,
          productionSafetyDay: 0,
          remainingInFloorDay: 0
        },
        imgUrl: '',
        pointerList: [],
        highLightIndex: '',
        pointerInfo: '',
        isLoop: true,
        bgSize: {
          wide: 0,
          height: 0
        },
        panoramaId: '',
        isFullScreen: true,
        projectDetail: '',
        moveTime: null,
        moveDistance: 0,
        isAutoLoop: true,
        arrayN: 0,
        BuildingDetailInfoArray: [],
        buildingDetailInfo: {
          decorationStandard: '',
          buildingLeader: '',
          buildingName: '',
          buildingTier: '',
          productType: '',
          overgroundArea: '',
          supervisingEnginer: '',
          households: '',
          standardHigh: '',
          undergroundArea: '',
          completePercent: ''
        },
        timeList: {
        },
        tureTimeList: [],
        carouselTime: '',
        isShowHistory: true
      }
    },
    mixins: [mixin],
    computed: {
      ...mapGetters({
        currentUser: 'currentUser',
        screenSetting: 'getScreenSetting'
      })
    },
    components: {
      building_info (resolve) {
        require(['./building_info.vue'], resolve)
      },
      loop (resolve) {
        require(['./loop.vue'], resolve)
      }
    },
    watch: {
      currentUser (oldItem, newItem) {
        if (this.currentUser.mid) {
          this.getMonitorDay()
          this.getBuildingInfo()
          this.getProjectInfo()
          if (oldItem.stageId !== newItem.stageId || oldItem.pjId !== newItem.pjId) {
            this.getUpdateTime()
          }
        }
      }
    },
    mounted () {
      this.getMonitorDay()
      this.getBuildingInfo()
      this.getProjectInfo()
      this.getUpdateTime()
      setTimeout(() => {
        this.moveContainer()
      }, 1000)
    },
    methods: {
      // 切换到历史记录的轮播图,获取楼栋列表的时候需要传入对应的时间
      carouselTimeCallback (item) {
        this.carouselTime = item.value
        this.setDateTimeCookie(item.key)
        this.getBuildingInfo()
      },
      getUpdateTime () {
        let data = {
          stageId: this.currentUser.stageId
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/panorama/getPanoramaUpdateTime`,
          data: this.$qs.stringify(data)
        }).then(res => {
          this.tureTimeList = []
          this.timeList = {}
          if (!res.data.data || res.data.data.length === 0) {
            this.carouselTime = '暂无更新时间'
            return
          }
          this.tureTimeList = res.data.data;
          (res.data.data).forEach((item, _index) => {
            item = this.$moment(item).get('year') + '年' + (this.$moment(item).get('month') + 1) + '月' + this.$moment(item).get('date') + '日'
            this.timeList[_index] = item
          })
          this.carouselTime = this.$moment(this.currentUser.dateTime).get('year') + '年' + (this.$moment(this.currentUser.dateTime).get('month') + 1) + '月' + this.$moment(this.currentUser.dateTime).get('date') + '日'
        })
      },
      setDateTimeCookie (index) {
        let _carouselTime = this.tureTimeList[index]
        let currentCookie = JSON.parse(this.$getCookie('currentUser'))
        this.$setCookie('currentUser', JSON.stringify(currentCookie), {dateTime: _carouselTime, domain: this.$site.domain})
        // 成功回调
        this.$store.commit('editCurrentUser', {dateTime: _carouselTime})
      },
      close () {
        this.isAutoLoop = false
        if (this.moveTime) {
          clearInterval(this.moveTime)
          this.moveTime = null
        }
        this.isBuildingInfoShow = false
      },
      moveContainer () {
        if (this.pointerList.length > 0) {
          if (!this.moveTime) {
            this.moveTime = setInterval(() => {
              this.showBuildingInfoShow()
            }, 1000 * 8)
          }
        }
      },
      showBuildingInfoShow () {
        if (this.moveDistance >= this.pointerList.length) {
          this.moveDistance = 0
        }
        this.isBuildingInfoShow = true
        this.pointerInfo = this.pointerList[this.moveDistance]
        this.highLightIndex = this.moveDistance
        this.moveDistance++
      },
      showRetrieve () {
      },
      fullScreen () {
        this.$fullScreen()
        this.isFullScreen = false
      },
      exitScreen () {
        this.$fullExit()
        this.isFullScreen = true
      },
      autoPlay (status) {
        this.isAutoLoop = !this.isAutoLoop
        if (status) {
          this.showBuildingInfoShow()
          this.moveContainer()
        } else {
          clearInterval(this.moveTime)
          this.moveTime = null
        }
      },
      autoHandle (status) {
        this.$store.commit('editScreenSetting', {auto: status})
      },
      showBuildingInfo (item, index) {
        this.pointerInfo = item
        this.isBuildingInfoShow = !this.isBuildingInfoShow
        this.highLightIndex = index
      },
      getMonitorDay () {
        let data = {
          pjId: this.currentUser.pjId,
          stageId: this.currentUser.stageId,
          dateTime: this.currentUser.dateTime
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/panorama/getMonitorDay`,
          data: this.$qs.stringify(data)
        }).then(res => {
          if (res.data.success) {
            let info = res.data.data
            this.panoTotalDate.abnormalWeatherDay = info.abnormalWeatherDay
            this.panoTotalDate.dustReachDay = info.dustReachDay
            this.panoTotalDate.noiseReachDay = info.noiseReachDay
            this.panoTotalDate.productionSafetyDay = info.productionSafetyDay
            this.panoTotalDate.remainingInFloorDay = info.remainingInFloorDay
          } else {
            this.$message.error(res.data.error)
          }
        })
      },
      getBuildingInfo () {
        let data = {
          stageId: this.currentUser.stageId,
          dateTime: this.currentUser.dateTime
        }
        this.$axios({
          method: 'post',
          closeMessage: true,
          url: `${this.$site.videoServer}/api/panorama/getBuildingInfo`,
          data: this.$qs.stringify(data)
        }).then(res => {
          if (!res.data.data) return
          let data = res.data.data
          if (data.fileUrl) {
            this.imgUrl = data.fileUrl
          } else {
            console.log('imgurl')
            this.imgUrl = '#'
          }
          let buildingList = []
          data.buildingInfo.forEach((item) => {
            if (item.isShow === 1) {
              buildingList.push(item)
            }
          })
          this.pointerList = buildingList
          this.bgSize.wide = data.panoramaParam.wide
          this.bgSize.height = data.panoramaParam.height
          this.panoramaId = data.panoramaParam.panoramaId
          this.getBuildingDetailInfoArray()
        })
      },
      // 获取详细楼层信息数组
      getBuildingDetailInfoArray () {
        this.BuildingDetailInfoArray = []
        this.arrayN = 0
        this.getBuildingDetailInfo()
      },
      getBuildingDetailInfo () {
        if (this.arrayN >= this.pointerList.length) {
          return
        }
        if (this.pointerList.length === 0) {
          return
        }
        let info = this.pointerList[this.arrayN]
        let data = {
          buildingId: info.buildingId,
          pjId: this.currentUser.pjId,
          stageId: this.currentUser.stageId,
          panoramaId: this.panoramaId
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/panorama/getBuildingDetailInfo`,
          data: this.$qs.stringify(data)
        }).then(res => {
          if (!res.data.data) return
          this.buildingDetailInfo = res.data.data
          this.buildingDetailInfo.nodes.forEach((item) => {
            if (!item.startTime) {
              item.startTime = ''
              return
            }
            item.startTime = this.$moment(item.startTime).get('year') + '.' + (this.$moment(item.startTime).get('month') + 1) + '.' + this.$moment(item.startTime).get('date')
          })
          this.BuildingDetailInfoArray.push(this.buildingDetailInfo)
          this.arrayN++
          this.getBuildingDetailInfo()
        })
      },
      quit () {
        this.$axios({
          method: 'post',
          url: `${this.$site.passportServer}/front/logout.htm`
        }).then(res => {
          this.$store.commit('resetCurrUser')
          this.$router.push({name: 'projectLogin'})
        })
      },
      getProjectInfo () {
        const data = {
          'stageId': this.currentUser.stageId,
          'pjId': this.currentUser.pjId
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/screen/getProjectInfo`,
          closeSaveRequest: true,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          this.projectDetail = res.data.data
        })
      },
      initTitle () {
        let rect = this.$refs.projectTitle.getBoundingClientRect()
        if (rect.width > 550) {
          this.projectTitleList.push(`智慧工地●${this.projectDetail.projectTitle}`)
          this.projectTitleList.push(`智慧工地●${this.projectDetail.projectTitle}`)
          this.isMarquee = true
        } else {
          this.isMarquee = false
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .top-center-panoramagram {
    vertical-align: top;
    display: table-cell;
    text-align: center;
    line-height: 92px;
    .top-title {
      z-index: 3;
      color: #b9eaf8;
      font-size: 32px;
      letter-spacing: 10px;
      font-weight: 600;
      text-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    }
    .top-light {
      position: absolute;
      background-image: url("/static/images/bgy-light.png");
      background-size: 100%;
      width: 561px;
      height: 100px;
      z-index: 2;
      top: 40px;
      left: 110px;
    }
  }
  .panoramagram-content {
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    .panoramagram-content-info {
      height: 100%;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .panoramagram-content-mask {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(10,91,100,.1);
      }
      .posi_pointer_list {
        height: 100%;
        position: absolute;
        .position_pointer {
          cursor: pointer;
          // display: flex;
          display: table;
          position: absolute;
          top: 325px;
          left: 425px;
          width: 120px;
          padding: 20px;
          color: #fff;
          text-shadow: 5px 5px 5px #000;
          align-items: center;
          &.highLight {
            background: rgba(0, 0, 0, 0.5);
            color: #00c5cc;
            border: 1px solid #00c5cc;
          }
          i {
            display: table-cell;
            vertical-align: middle;
            &.iconfont {
              font-size: 20px;
              padding-right: 5px;
            }
          }
          &>div {
            display: table-cell;
          }
          // .icon-line {
          //   position: absolute;
          //   top: 50%;
          //   left: 100%;
          //   width: 140px;
          //   height: 1px;
          //   background: #00c5cc;
          //   .icon-circle {
          //     position: absolute;
          //     top: 100%;
          //     left: 100%;
          //     margin-left: -6px;
          //     margin-top: -3px;
          //     width: 6px;
          //     height: 6px;
          //     border-radius: 50%;
          //     background: #00c5cc;
          //   }
          // }
          // .lineleft {
          //   left: -140px;
          //   .icon-circle {
          //     left: 0;
          //   }
          // }
        }
      }
      .panoramagram-content-total {
        width: 80%;
        margin: 0 auto;
        // display: flex;
        padding: 30px 50px 0px;
        justify-content: space-around;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        .panoramagram-content-totalItem {
          width: 18%;
          margin: 0 1%;
          float: left;
          height: 134px;
          background-color: #edf9fa;
          text-align: center;
          padding-top: 23px;
          box-sizing: border-box;
          border-radius: 5px;
          .panoramagram-totalItem-num {
            font-weight:bold;
            color:rgba(31,195,201,1);
            text-shadow:0px 6px 6px rgba(49,208,213,0.2);
            font-size: 48px;
            &.red {
              color:rgba(231,70,70,1);
              text-shadow:0px 6px 6px rgba(231,70,70,0.2);
            }
          }
          .panoramagram-totalItem-des {
            font-size:20px;
            margin-top: 7px;
            font-weight:bold;
            color:rgba(62,84,85,1);
          }
          .panoramagram-totalItem-subDes {
            font-size:14px;
            font-weight:400;
            color:rgba(62,84,85,1);
            line-height:24px;
          }
        }
      }

    }
  }
  .show-hide-enter-active {
    transition: all .5s ease;
  }
  .show-hide-leave-active {
    transition: all 1s ease;
  }
  .show-hide-enter, .show-hide-leave-active {
    transform: scale(0);
    opacity: 0;
  }

  .handPoint {
    cursor: pointer;
    &:hover {
      color: #00e5ff
    }
  }
   .top-right {
    i {
      vertical-align: middle;
    }
  }
  .history-select {
    display: inline-block;
  }
  .right-line {
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 30px;
    margin-right: 20px;
    margin-left: 10px;
    background-image: url("/static/images/line04.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1px;
  }
</style>
